<template>
    <view class="wai">
        <view class="top">
            <view class="right">
                <input v-model="keywords" placeholder-class="placeholder-text" type="text" placeholder="请输入内容" />
            </view>
            <view @click="addbtn" class="addbtn">添加</view>
        </view>
        <view v-for="it in goodList" :key="it.id" class="flex">
            <view class="">{{ it.name }}</view>
            <view @click="delBtn(it)" class="addbtn">删除</view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { utils } from '@/utils/utils.js';
import { goodsCategory, getGoodsList, delFl, addSp } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
const goodList = ref([]); //商品分类列表
const keywords = ref(''); //输入的内容
onLoad(() => {
    getGoodList();
});
// 点击添加分类、
const addbtn = async () => {
    const parms = ref({
        name: keywords.value,
        weigh: 0
    });
    const ret = await addSp(parms.value);
    if (ret.code == 1) {
        getGoodList();
        utils(ret.msg);
    } else {
        getGoodList();
        utils(ret.msg);
    }
    keywords.value = '';
};
// 点击删除分类
const delBtn = async (it) => {
    console.log(it);
    const ret = await getGoodsList(it.shop_id, it.id);
    console.log(ret);
    if (ret.code == 1) {
        utils('请先移除该分类下的商品！');
    } else {
        const ret1 = await delFl(it.id);
        if (ret1.code == 1) {
            getGoodList();
            utils(ret1.msg);
        } else {
            getGoodList();
            utils(ret1.msg);
        }
    }
};

// 获取商品分类
const getGoodList = async () => {
    const ret = await goodsCategory();
    console.log(ret.data);
    if (ret.code == 1) {
        goodList.value = ret.data;
    } else {
        utils();
    }
};
</script>

<style lang="scss" scoped>
.wai {
    .addbtn {
        color: #ffffff;
        padding: 10rpx 34rpx;
        border-radius: 50rpx;
        background: linear-gradient(85deg, #ff9a01 0%, #ffb901 100%);
    }
    .flex {
        display: flex;
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 30rpx;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
    }
    .top {
        .right {
            ::v-deep .placeholder-text {
                font-size: 26.25rpx;
                color: #cccccc;
            }
            width: 534rpx;
            height: 72rpx;
            background: #ffffff;
            border-radius: 50rpx;
            padding-left: 76rpx;
            align-items: center;
            display: flex;
            z-index: 9;
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        margin-bottom: 30rpx;
    }
    min-height: 100vh;
    background-color: #f9f9f9;
    padding: 30rpx;
}
</style>
